<template>
  <div class="dointBody">
    <div class="donateTitle">
      <h1>感谢您的爱心</h1>
    </div>
    <div v-if="user ===null">
      <router-view></router-view>
    </div>
    <div v-if="user !==null && user.urole === 1">
      <el-row class="mb-4">
        <el-button type="primary" plain @click="DonateMoney">我想捐钱</el-button>
        <el-button type="success" plain @click="DonateGoods">我想捐物</el-button>
      </el-row>
      <router-view></router-view>
    </div>
    <div v-else-if="user !==null">
      <h3 class="defh3">您是公司账号，请先与我们联系，使用对公账户向我们转账</h3>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>公益账户</span>
          </div>
        </template>
        <table class="text item">
          <tr>
            <td>账户：</td>
            <td>6217888866666668888</td>
          </tr>
          <tr>
            <td>收款方：</td>
            <td>爱心助公益联盟</td>
          </tr>
          <tr>
            <td>专属客服：</td>
            <td>爱心助公益联盟</td>
          </tr>
          <tr>
            <td>联系电话：</td>
            <td>400-666-8888</td>
          </tr>
        </table>
      </el-card>
      <div class="warning">
        <h3>
          <el-text class="mx-1" type="warning" style="font-size: 20px">注意事项：<br>具体捐赠抵扣请咨询相关税务机构
          </el-text>
        </h3>
        <p>
          <el-text class="mx-1" style="font-size: 20px">
            感谢您对我们公益组织的关注和支持！我们希望在您了解捐赠的前提下，向您说明捐赠的款项是非定向的，这意味着您的捐款不会被特定指定用于某个具体项目或领域，而是会用于全面支持和推动我们组织的公益事业。
          </el-text>
        </p>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "DonateParent",
  data() {
    return {
      user: {}
    }
  },
  methods: {
    DonateMoney() {
      this.$router.push("/front/donate/DonateMoney")
    },
    DonateGoods() {
      this.$router.push("/front/donate/DonateGoods")
    }
  },
  mounted() {
    this.$checkLogin()
    this.user = JSON.parse(localStorage.getItem("user"))
  }
}
</script>

<style scoped>
.dointBody {
  padding: 40px;
  background: #ffff;
}

.donateTitle {
  text-align: center;
}

.defh3 {
  padding: 50px;
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item td {
  padding-bottom: 18px;
//margin-bottom: 18px;
}

.box-card {
  margin: 0 auto;
  width: 480px;
}
.warning {
  padding: 8px 16px;
  border-radius: 4px;
  border-left: 5px solid var(--el-color-danger);
  margin: 20px 20px;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 400;
}
</style>